<template>
  <div class="monitor-box">
    <div class="left-box">
      <div class="control-box">
        <div class="search-box box-shadow">
          <a-form>
            <a-form-item label="标段">
              <a-select
                v-model:value="cellQueryFormState.sections[0].sectionId"
              >
                <a-select-option
                  v-for="section in sections"
                  :key="section.sectionId"
                  :value="section.sectionId"
                >
                  {{ section.sectionName }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="仅显示当日施工单元">
              <a-switch
                :defaultChecked="cellQueryFormState.workToday == 1"
                @change="
                  () => {
                    cellQueryFormState.workToday =
                      cellQueryFormState.workToday == 1 ? undefined : 1
                  }
                "
              />
            </a-form-item>
            <a-form-item label="单元状态">
              <a-select v-model:value="cellQueryFormState.status">
                <a-select-option
                  v-for="cellStatus in cellStatusDict.dict2"
                  :key="cellStatus.statusCode"
                  :value="cellStatus.statusCode"
                >
                  {{ cellStatus.statusName }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="审批状态">
              <a-select v-model:value="cellQueryFormState.checkStatus">
                <a-select-option
                  v-for="item in auditDict.dict"
                  :key="item.key"
                  :value="item.key"
                >
                  {{ auditDict.getValueByKey(item.key) }}
                </a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item label="单元名称">
              <a-input v-model:value="cellQueryFormState.cellName"></a-input>
            </a-form-item>
            <a-form-item>
              <a-button @click="getCellBaseInfoList" type="primary"
                >查询</a-button
              >
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div class="cell-table-box box-shadow">
        <div class="table-box-header">
          单元列表
        </div>
        <div class="table-box-center">
          <a-table
            :scroll="{ y: setHeight('.table-box-center', 125) + 'px' }"
            :data-source="cellBaseInfoList.cellInfo"
            :rowKey="record => record.cellId"
            @change="getCellBaseInfoList"
            :pagination="{
              current: cellBaseInfoList.startPage,
              total: cellBaseInfoList.totalCount,
              pageSize: cellBaseInfoList.everyPage,
              showLessItems: true
            }"
          >
            <a-table-column title="归属标段" data-index="sectionName" />
            <a-table-column title="单元名称" data-index="cellName" />
            <a-table-column title="工艺类型" data-index="kind" width="60px">
              <template #default="{text}">
                {{ kindDict.getNameByCode(text) }}
              </template>
            </a-table-column>
            <a-table-column title="状态" data-index="checkStatus" width="60px">
              <template #default="{text}">
                <div
                  :style="{
                    color: auditDict.getColorByKey(text),
                    border: '1px solid',
                    borderRadius: '3px'
                  }"
                >
                  {{ auditDict.getValueByKey(text) }}
                </div>
              </template>
            </a-table-column>
            <a-table-column title="操作" data-index="cellId" width="60px">
              <template #default="{text,record}">
                <div class="icon-box">
                  <div @click="handleCell(record)">
                    <EditOutlined />
                  </div>
                </div>
              </template>
            </a-table-column>
          </a-table>
        </div>
      </div>
    </div>
    <div class="right-box">
      <div class="base-info-box box-shadow">
        <a-descriptions :column="4">
          <a-descriptions-item label="单元名称" :span="1">
            {{ inCellBaseInfo ? inCellBaseInfo.cellName : '--' }}
          </a-descriptions-item>
          <a-descriptions-item label="创建时间" :span="1">
            {{ inCellBaseInfo ? inCellBaseInfo.gtmCreateTime : '--' }}
          </a-descriptions-item>
          <a-descriptions-item label="工艺类型" :span="1">
            {{
              inCellBaseInfo
                ? kindDict.getNameByCode(inCellBaseInfo.kind)
                : '--'
            }}
          </a-descriptions-item>
          <a-descriptions-item label="归属标段" :span="1">
            {{ inCellBaseInfo ? inCellBaseInfo.sectionName : '--' }}
          </a-descriptions-item>
          <a-descriptions-item label="区域面积" :span="1">
            {{ inCellBaseInfo ? inCellBaseInfo.area : '--' }}
          </a-descriptions-item>
          <a-descriptions-item label="创建账号" :span="1">
            {{ inCellBaseInfo ? inCellBaseInfo.userName : '--' }}
          </a-descriptions-item>
          <!-- 三检 -->
          <a-descriptions-item label="三检状态" :span="1">
            {{ tpiStatue ? tpiStatue : '--' }}
          </a-descriptions-item>
        </a-descriptions>
      </div>
      <div class="report-box box-shadow">
        <div class="report-title">
          数据报表
          <div class="audit-box">
            <a-button
              @click="
                () => {
                  auditSetInfo.auditPut.showModal = true
                }
              "
              :disabled="
                !inCellBaseInfo &&
                  !$store.getters['userinfo/isPermission'](
                    inCellBaseInfo?.sectionId,
                    inCellBaseInfo?.kind,
                    0
                  )
              "
              type="primary"
              >提交审核</a-button
            >
            <a-button
              @click="
                () => {
                  auditSetInfo.auditPermit.showModal = true
                }
              "
              :disabled="
                !inCellBaseInfo &&
                  !$store.getters['userinfo/isPermission'](
                    inCellBaseInfo?.sectionId,
                    inCellBaseInfo?.kind,
                    1
                  )
              "
              type="primary"
              >审核通过</a-button
            >
            <a-button
              @click="
                () => {
                  auditSetInfo.auditReject.showModal = true
                }
              "
              :disabled="
                !inCellBaseInfo &&
                  !$store.getters['userinfo/isPermission'](
                    inCellBaseInfo?.sectionId,
                    inCellBaseInfo?.kind,
                    1
                  )
              "
              type="primary"
              >审核驳回</a-button
            >
            <a-button
              @click="getAuditLog(inCellBaseInfo.cellId)"
              :disabled="
                !inCellBaseInfo &&
                  !$store.getters['userinfo/isPermission'](
                    inCellBaseInfo?.sectionId,
                    inCellBaseInfo?.kind,
                    2
                  )
              "
              type="primary"
              >记录查看</a-button
            >
          </div>
        </div>
        <div class="report-search-box">
          <span>报表类型</span>
          <a-select v-model:value="reportSel">
            <a-select-option :key="1" :value="1">压实施工遍数图形报告</a-select-option>
            <a-select-option :key="2" :value="2">压实施工轨迹图形报告</a-select-option>
            <a-select-option :key="201" :value="201">报警详情</a-select-option>
            <!-- 三检 -->
            <a-select-option :key="3" :value="3">三检信息</a-select-option>
          </a-select>
          <a-button
            @click="getReport(inCellBaseInfo.cellId, reportSel)"
            :disabled="!inCellBaseInfo"
            type="primary"
            >查询</a-button
          >
        </div>
        <div class="report-center">
          <!-- 三检 -->
          <div v-if="reportType < 100 && !showTpiList" class="img-container">
            <a-image
              v-if="reportImg"
              width="940px"
              height="530px"
              :src="reportImg"
            />
          </div>
          <div v-if="reportType == 201" class="table-container">
            <a-table
              :scroll="{ y: setHeight('.table-container', 125) + 'px' }"
              :data-source="reportWarn.info"
              :rowKey="
                (record, index) => {
                  return index
                }
              "
              @change="getWarnInfo"
              :pagination="{
                current: reportWarn.startPage,
                total: reportWarn.totalCount,
                pageSize: reportWarn.everyPage,
                showLessItems: true
              }"
            >
              <a-table-column title="时间" data-index="gtmTime" />
              <a-table-column title="机械名称" data-index="deviceName" />
              <a-table-column title="设计速度(km/h)" data-index="deviceName">
                <template #default="{text}">
                  {{ reportWarn.design.toFixed(2) }}
                </template>
              </a-table-column>
              <a-table-column title="施工速度(km/h)" data-index="build">
                <template #default="{text}">
                  {{ text.toFixed(2) }}
                </template>
              </a-table-column>
            </a-table>
          </div>
          <!-- 三检 -->
          <TpiListModal :is-show="showTpiList" ref="sonTpiList"></TpiListModal>
        </div>
        <!-- 三检 -->
        <div v-if="reportType < 200 && !showTpiList" class="report-footer">
          <a-button
            @click="createTiledMap(inCellBaseInfo.cellId)"
            :disabled="!inCellBaseInfo"
            >重新生成</a-button
          >
          <a-button
            @click="exportReport"
            :disabled="!inCellBaseInfo"
            type="primary"
            >导出</a-button
          >
        </div>
      </div>
    </div>
  </div>
  <SModal
    title="提交审核"
    :width="450"
    :height="465"
    :is-show="auditSetInfo.auditPut.showModal"
    @closed="
      () => {
        auditSetInfo.auditPut.showModal = false
      }
    "
  >
    <div class="audit-set-box">
      <a-alert message="注意" type="info" show-icon>
        <template #description>
          1.请将施工单元内机械结束派遣后进行提交；<br />
          2.审核阶段和审核通过后将无法修改施工单元参数；<br />
          3.审核驳回后可继续修改施工单元参数；
        </template>
      </a-alert>
      <div class="audit-set-form-box">
        <a-form :labelCol="{ style: 'width: 80px' }">
          <a-form-item label="归属标段">
            {{ inCellBaseInfo ? inCellBaseInfo.sectionName : '' }}
          </a-form-item>
          <a-form-item label="单元名称">
            {{ inCellBaseInfo ? inCellBaseInfo.cellName : '' }}
          </a-form-item>
          <a-form-item label="工艺">
            {{
              inCellBaseInfo ? kindDict.getNameByCode(inCellBaseInfo.kind) : ''
            }}
          </a-form-item>
          <a-form-item label="状态">
            {{
              inCellBaseInfo
                ? auditDict.getValueByKey(inCellBaseInfo.checkStatus)
                : ''
            }}
          </a-form-item>
          <a-form-item label="备注" :wrapperCol="{ span: 18 }">
            <a-textarea
              v-model:value="auditSetInfo.auditPut.submitInfo.remark"
              :auto-size="{ minRows: 2, maxRows: 5 }"
            />
          </a-form-item>
          <a-form-item class="audit-set-btn-bar">
            <a-button
              @click="
                commitCheck(
                  inCellBaseInfo?.cellId,
                  auditSetInfo.auditPut.submitInfo.remark
                )
              "
              type="primary"
            >
              提交
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </SModal>
  <SModal
    title="审核通过"
    :width="450"
    :height="465"
    :is-show="auditSetInfo.auditPermit.showModal"
    @closed="
      () => {
        auditSetInfo.auditPermit.showModal = false
      }
    "
  >
    <div class="audit-set-box">
      <a-alert message="注意" type="info" show-icon>
        <template #description>
          1.请将施工单元内机械结束派遣后进行提交；<br />
          2.审核阶段和审核通过后将无法修改施工单元参数；<br />
          3.审核驳回后可继续修改施工单元参数；
        </template>
      </a-alert>
      <div class="audit-set-form-box">
        <a-form :labelCol="{ style: 'width: 80px' }">
          <a-form-item label="归属标段">
            {{ inCellBaseInfo ? inCellBaseInfo.sectionName : '' }}
          </a-form-item>
          <a-form-item label="单元名称">
            {{ inCellBaseInfo ? inCellBaseInfo.cellName : '' }}
          </a-form-item>
          <a-form-item label="工艺">
            {{
              inCellBaseInfo ? kindDict.getNameByCode(inCellBaseInfo.kind) : ''
            }}
          </a-form-item>
          <a-form-item label="状态">
            {{
              inCellBaseInfo
                ? auditDict.getValueByKey(inCellBaseInfo.checkStatus)
                : ''
            }}
          </a-form-item>
          <a-form-item label="备注" :wrapperCol="{ span: 18 }">
            <a-textarea
              v-model:value="auditSetInfo.auditPermit.submitInfo.remark"
              :auto-size="{ minRows: 2, maxRows: 5 }"
            />
          </a-form-item>
          <a-form-item class="audit-set-btn-bar">
            <a-button
              @click="
                commitPermit(
                  inCellBaseInfo?.cellId,
                  auditSetInfo.auditPermit.submitInfo.remark
                )
              "
              type="primary"
            >
              提交
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </SModal>
  <SModal
    title="审核驳回"
    :width="450"
    :height="465"
    :is-show="auditSetInfo.auditReject.showModal"
    @closed="
      () => {
        auditSetInfo.auditReject.showModal = false
      }
    "
  >
    <div class="audit-set-box">
      <a-alert message="注意" type="info" show-icon>
        <template #description>
          1.请将施工单元内机械结束派遣后进行提交；<br />
          2.审核阶段和审核通过后将无法修改施工单元参数；<br />
          3.审核驳回后可继续修改施工单元参数；
        </template>
      </a-alert>
      <div class="audit-set-form-box">
        <a-form :labelCol="{ style: 'width: 80px' }">
          <a-form-item label="归属标段">
            {{ inCellBaseInfo ? inCellBaseInfo.sectionName : '' }}
          </a-form-item>
          <a-form-item label="单元名称">
            {{ inCellBaseInfo ? inCellBaseInfo.cellName : '' }}
          </a-form-item>
          <a-form-item label="工艺">
            {{
              inCellBaseInfo ? kindDict.getNameByCode(inCellBaseInfo.kind) : ''
            }}
          </a-form-item>
          <a-form-item label="状态">
            {{
              inCellBaseInfo
                ? auditDict.getValueByKey(inCellBaseInfo.checkStatus)
                : ''
            }}
          </a-form-item>
          <a-form-item label="备注" :wrapperCol="{ span: 18 }">
            <a-textarea
              v-model:value="auditSetInfo.auditReject.submitInfo.remark"
              :auto-size="{ minRows: 2, maxRows: 5 }"
            />
          </a-form-item>
          <a-form-item class="audit-set-btn-bar">
            <a-button
              @click="
                commitReject(
                  inCellBaseInfo?.cellId,
                  auditSetInfo.auditReject.submitInfo.remark
                )
              "
              type="primary"
            >
              提交
            </a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </SModal>
  <SModal
    title="审核记录"
    width="460"
    :is-show="auditSetInfo.auditLogModal"
    @closed="
      () => {
        auditSetInfo.auditLogModal = false
      }
    "
  >
    <div class="log-box">
      <a-table
        :scroll="{ y: `300px` }"
        :data-source="auditSetInfo.auditList"
        :rowKey="record => record.gtmCreate"
        :pagination="false"
      >
        <a-table-column title="操作" data-index="kind" />
        <a-table-column title="时间" data-index="gtmCreate" />
        <a-table-column title="账号" data-index="userName" />
        <a-table-column title="备注" data-index="content" />
      </a-table>
    </div>
  </SModal>
</template>

<script lang="ts">
import { useStore } from 'vuex'
import {
  defineComponent,
  reactive,
  ref,
  toRefs,
  onMounted,
  onBeforeUnmount
} from 'vue'
import { setHeight } from '@/utils/tableUtils'
import { cellBaseInfo } from '@/hooks/cell/index'
import kindDict from '@/dicts/kindDict'
import cellStatusDict from '@/dicts/cellStatusDict'
import { EditOutlined } from '@ant-design/icons-vue'
import axios from '@/utils/axios'
import qs from 'qs'
import { message } from 'ant-design-vue'
import { Base64ToPng } from '@/utils/tyutils/index'
import { Throttle } from '@/utils/tyutils/index'
import auditDict from '@/dicts/auditDict'
import SModal from '@/components/SModal/index.vue'
import config from "@/config/index"
//三检
import TpiListModal from '@/components/SModal/TpiListModal.vue'
interface AuditInfo {
  showModal: false
  submitInfo: {
    cellId: number | null
    remark: string | null
  }
}

export default defineComponent({
  setup() {
    const store = useStore()
    const sections = ref(
      JSON.parse(JSON.stringify(store.getters['userinfo/getUserSection']))
    )
    const {
      cellQueryFormRef,
      cellQueryFormState,
      cellBaseInfoList,
      inCellBaseInfo,
      getCellBaseInfoList,
      setCellStatus,
      getCellBaseInfo
    } = cellBaseInfo()
    const reportInfo = reactive({
      reportSel: 1,
      reportType: 1,
      reportFileType: 'img',
      reportImg: <any>null,
      reportWarn: {
        startPage: 1,
        everyPage: 10,
        info: new Array()
      }
    })
    const auditSetInfo = reactive({
      auditPut: <AuditInfo>{
        showModal: false,
        submitInfo: {
          cellId: null,
          remark: null
        }
      },
      auditPermit: <AuditInfo>{
        showModal: false,
        submitInfo: {
          cellId: null,
          remark: null
        }
      },
      auditReject: <AuditInfo>{
        showModal: false,
        submitInfo: {
          cellId: null,
          remark: null
        }
      },
      auditLogModal: false,
      auditList: new Array()
    })
    // 三检
    let showTpiList = ref<boolean>(false)
    const sonTpiList = ref()
    const tpiStatue = ref()
    const getCellTpiStatue = (cellId: number) => {
      const userinfo = store.getters['userinfo/getUserInfo']
      if (userinfo) {
        const url =
          config.cityUrlPath + '/detection/work-unit/' + cellId + '/status'
        axios.get(url).then((res: any) => {
          if (res.success) {
            if (res.data.length > 0) {
              tpiStatue.value = res.data[0].status
            }
          }
        })
      }
    }
    // 三检状态
    const getAreaStatus = (cellId: number) => {
      const userinfo = store.getters['userinfo/getUserInfo']
      if (userinfo) {
        const url = config.cityUrlPath + '/detectionTest/detection/getAreaStatusbySysID?id=' + cellId
        axios.get(url).then((res: any) => {
          if (res.code == 0) {
            if (res.data == -1) {
              tpiStatue.value = '待检测'
            } else if (res.data == 0) {
              tpiStatue.value = '不合格'
            } else if (res.data == 1) {
              tpiStatue.value = '合格'
            }
          }
        })
      }
    }
    /**
     * 获取报告
     * @param cellId
     * @param workType
     */
    const getReport = (cellId: number, workType: number) => {
      reportInfo.reportImg = null
      reportInfo.reportWarn = {
        startPage: 1,
        everyPage: 10,
        info: new Array()
      }
      // 三检
      showTpiList.value = false
      reportInfo.reportType = workType
      switch (workType) {
        case 201:
          getWarnInfo(null)
          break
        case 3:
          showTpiList.value = true
          sonTpiList.value.tpiListInit(cellId)
          break
        default:
          axios
            .post(
              '/nyMap/reporter',
              qs.stringify({ cellID: cellId, workType }),
              {
                headers: {
                  'Content-Type': 'application/x-www-form-urlencoded'
                },
                responseType: 'arraybuffer'
              }
            )
            .then((res: any) => {
              reportInfo.reportImg =
                'data:image/png;base64,' +
                btoa(
                  new Uint8Array(res).reduce(
                    (data, byte) => data + String.fromCharCode(byte),
                    ''
                  )
                )
            })
            .catch((err: any) => {
              reportInfo.reportImg = null
              message.info('暂未施工')
            })
      }
    }

    /**
     * 获取报警信息
     */
    const getWarnInfo = (pageInfo: any) => {
      axios
        .post('/comp/findWarnDetail', {
          cellId: inCellBaseInfo.value.cellId,
          startPage: pageInfo
            ? pageInfo.current
            : reportInfo.reportWarn.startPage,
          everyPage: reportInfo.reportWarn.everyPage
        })
        .then((res: any) => {
          if (res.success) {
            reportInfo.reportWarn = res.data
          } else {
            message.info(res.msg)
          }
        })
    }

    /**
     * 重新生成图形报告
     */
    const createTiledMap = Throttle((cellId: number) => {
      axios
        .post(
          '/nyMap/reCreatReport',
          qs.stringify({
            cellID: cellId,
            workType: reportInfo.reportType
          }),
          {
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
          }
        )
        .then((res: any) => {
          if (res.success) {
            getReport(inCellBaseInfo.value.cellId, reportInfo.reportType)
            message.info('重新生成成功')
          } else {
            message.info('重新生成失败')
          }
        })
    }, 5)

    /**
     * 导出图形报告
     */
    const exportReport = () => {
      switch (reportInfo.reportType) {
        case 1:
          if (!reportInfo.reportImg) {
            message.info('暂未施工')
            return
          }
          Base64ToPng(reportInfo.reportImg)
          break
        case 2:
          if (!reportInfo.reportImg) {
            message.info('暂未施工')
            return
          }
          Base64ToPng(reportInfo.reportImg)
          break
        default:
          break
      }
    }

    /**
     * 选择仓面
     * @param cell
     */
    const handleCell = (cell: any) => {
      getCellBaseInfo(cell)
      //三检
      // getCellTpiStatue(cell.cellId)
      // 新三检
      getAreaStatus(cell.cellId)
    }

    // 提交审核
    const commitCheck = (cellId: number, content: string) => {
      axios
        .post('/common/commitCheck', {
          cellId: cellId,
          content: content
        })
        .then((res: any) => {
          if (res.success) {
            let cell = cellBaseInfoList.value.cellInfo.find((item: any) => {
              return item.cellId === cellId
            })
            if (cell) {
              cell.checkStatus = 1
            }
            message.info('提交成功')
            auditSetInfo.auditPut.showModal = false
          } else {
            message.info(res.msg)
          }
        })
    }

    // 通过审核
    const commitPermit = (cellId: number, content: string) => {
      axios
        .post('/common/passCheck', {
          cellId: cellId,
          content: content
        })
        .then((res: any) => {
          if (res.success) {
            let cell = cellBaseInfoList.value.cellInfo.find((item: any) => {
              return item.cellId === cellId
            })
            if (cell) {
              cell.checkStatus = 3
            }
            message.info('提交成功')
            auditSetInfo.auditPermit.showModal = false
          } else {
            message.info(res.msg)
          }
        })
    }

    // 驳回审核
    const commitReject = (cellId: number, content: string) => {
      axios
        .post('/common/dismissCheck', {
          cellId: cellId,
          content: content
        })
        .then((res: any) => {
          if (res.success) {
            let cell = cellBaseInfoList.value.cellInfo.find((item: any) => {
              return item.cellId === cellId
            })
            if (cell) {
              cell.checkStatus = 2
            }
            message.info('提交成功')
            auditSetInfo.auditReject.showModal = false
          } else {
            message.info(res.msg)
          }
        })
    }

    // 获取审核记录
    const getAuditLog = (cellId: number) => {
      axios
        .post('/common/findCheck', {
          cellId: cellId
        })
        .then((res: any) => {
          if (res.success) {
            auditSetInfo.auditList = res.data
            auditSetInfo.auditLogModal = true
          } else {
            message.info(res.msg)
          }
        })
    }

    onMounted(() => {
      if (sections.value.length > 0) {
        cellQueryFormState.value.sections[0].sectionId =
          sections.value[0].sectionId
        cellQueryFormState.value.sections[0].kind = [3, 4]
        getCellBaseInfoList(null)
      }
    })

    return {
      setHeight,
      sections,
      kindDict,
      cellStatusDict,
      ...toRefs(reportInfo),
      handleCell,
      getReport,
      exportReport,
      createTiledMap,
      cellQueryFormRef,
      cellQueryFormState,
      cellBaseInfoList,
      inCellBaseInfo,
      getCellBaseInfoList,
      setCellStatus,
      getCellBaseInfo,

      auditDict,
      auditSetInfo,
      commitCheck,
      commitPermit,
      commitReject,
      getAuditLog,

      getWarnInfo,
      //三检
      showTpiList,
      sonTpiList,
      getCellTpiStatue,
      tpiStatue,
      // 新三检
      getAreaStatus
    }
  },
  components: { EditOutlined, SModal, TpiListModal }
})
</script>

<style lang="scss" scoped>
.monitor-box {
  display: flex;
  width: 100%;
  height: 100%;
  .left-box {
    display: flex;
    flex-direction: column;
    width: 360px;
    height: 100%;
    .control-box {
      display: flex;
      width: 100%;
      height: 312px;
      .search-box {
        width: 360px;
        height: 100%;
        padding: 12px 17px;
        box-sizing: border-box;
        ::v-deep label {
          color: #666666;
        }
        ::v-deep .ant-form-item {
          display: flex;
          margin-bottom: 10px;
        }
        ::v-deep .ant-form-item-control-wrapper {
          flex: 1;
        }
        ::v-deep .ant-select {
          width: 100%;
        }
      }
    }
    .cell-table-box {
      display: flex;
      flex-direction: column;
      width: 360px;
      flex: 1;
      margin-top: 20px;
      padding: 0 13px;
      .table-box-header {
        color: #333333;
        font-size: 18px;
        font-weight: bold;
        padding: 18px 0 10px 10px;
      }
      .table-box-center {
        width: 100%;
        flex: 1;
      }
    }
  }
  .right-box {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    margin-left: 20px;
    .base-info-box {
      width: 100%;
      height: 82px;
      padding: 14px 0 2px;
    }
    .report-box {
      display: flex;
      flex-direction: column;
      width: 100%;
      flex: 1;
      margin-top: 20px;
      .report-title {
        display: flex;
        color: #333333;
        font-size: 18px;
        font-weight: bold;
        padding: 18px 0 10px 34px;
        border-bottom: 1px solid #edf0fb;
        .audit-box {
          flex: 1;
          display: flex;
          padding: 0 34px;
          justify-content: flex-end;
          ::v-deep > button {
            margin-left: 20px;
          }
        }
      }
      .report-search-box {
        padding: 18px 34px;
        > span {
          color: #666666;
          font-size: 14px;
          font-weight: bold;
          line-height: 32px;
          font-family: 'PingFangSC-Medium, PingFang SC';
        }
        ::v-deep .ant-select {
          width: 240px;
          margin: 0 8px;
        }
        ::v-deep button {
          margin-left: 80px;
        }
      }
      .report-center {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        flex: 1;
        .img-container {
          width: 940px;
          height: 530px;
        }
        .table-container {
          width: 1100px;
          height: 530px;
        }
      }
      .report-footer {
        display: flex;
        justify-content: flex-end;
        padding: 16px 34px;
        height: 64px;
        ::v-deep button {
          margin-left: 8px;
        }
      }
    }
  }
}
.audit-set-box {
  position: absolute;
  width: 100%;
  height: 376px;
  left: 0;
  ::v-deep .ant-alert-with-description {
    padding: 8px;
  }
  .audit-set-form-box {
    width: 100%;
    padding: 8px 24px;
    ::v-deep .ant-form {
      color: #666666;
    }
    ::v-deep .ant-form-item {
      margin-bottom: 0;
    }
    .audit-set-btn-bar {
      display: flex;
      justify-content: flex-end;
      margin-top: 15px;
    }
  }
}
</style>
